import React, { Component, Fragment } from "react";

// 变量
let msg = "大吉大利，今晚吃鸡！";
// 布尔值
let bool = true;
// 对象
let obj = {
  name: "xiaoming",
};
// 数组
let arr = ["⭐", "🌙", "☀"];
// 数组2
let arr2 = [
  <h1 key="111">123</h1>,
  <h1 key="121">456</h1>,
  <h1 key="211">789</h1>,
];
// 函数
let msg_hanshu = () => {
  return `------我是函数返回的结果-------`;
};
export default class App extends Component {
  render() {
    return (
      <Fragment>
        {/* jsx表达式 */}

        {/* 普通字符 */}
        <h1 key="1">普通字符</h1>

        {/* 模板语法 vue 是 {{}}  React 是 {} */}

        {/* 算术运算 */}
        {1 + 1}

        {/* 变量或者字符 */}
        {"helo"}
        {msg}

        {/* 布尔值 ---- 不支持*/}
        <h1 key="2">bool:{bool}</h1>

        {/* 对象 ---- 不支持 */}
        {/* <h1>{obj}</h1> */}

        {/* 对象的属性 */}
        <h1 key="3">name:{obj.name}</h1>

        {/* 数组 */}
        {arr}
        {arr2}

        {/* 函数 */}
        <h1 key="6">{msg_hanshu()}</h1>

        {/* 三目运算符 */}
        {bool ? <h1>⭐</h1> : <h1>🌙</h1>}
      </Fragment>
    );
  }
}
